<template>
  <div class="home">
    
    <div class="box">
        <div style="position:fixed;background-color:white; z-index:999;">
            <div style="width:100vw; height:1.08rem; line-height:.5rem;text-align:center;;">
                <input class="sousuo" type="text" placeholder="在当前场景下搜索" name="" id="">
            </div>
        <div class="tags">
            <div class="tag" ref="scroll">
                    <span :class="tagid==''?'tts':'tt'" @click="qb1">全部</span>
                    <span ref="tt"  @click="fl(x.tagId,i)" :class="tagid==x.tagId?'tts':'tt'" v-for="x,i in tag" :key="i">
                        {{ x.name }}  
                    </span>
            </div>
            <div class="tb">
                   <img @click="ft" :class="xia" src="../../imgs/xia.png" alt="">  
                </div>
            <div style="position:absolute;">
            <div :class="tyc">
                <span class="tycs" @click="qb">全部</span>
                <span  class="tycs" @click="fl(x.tagId,i)" v-for="x,i in tag" :key="i">
                    {{ x.name }}
                </span>
            </div>
            </div>
        </div>
        <div class="fl">
            <span @click="zr" :style="ph==0?'background-color:#0773fc;color:white;':''" class="fls">最热</span>
            <span @click="zx" :style="ph==1?'background-color:#0773fc;color:white;':''" class="fls">最新</span>
            <span @click="syzd" :style="ph==2?'background-color:#0773fc;color:white;':''" class="fls">使用最多</span>
            <span @click="zdsc" :style="ph==3?'background-color:#0773fc;color:white;':''" class="fls">最多收藏</span>
            <span @click="shai" style="margin-right:0;" class="fls">筛选</span>
        </div>
        <div :class="sx">
            <span @click="qb" :style="mff==0?'background-color:#0773fc; color:white;':''" class="sxs">全部</span>
            <span @click="mf" :style="mff==2?'background-color:#0773fc;color:white;':''" class="sxs">免费</span>
            <span @click="ff" :style="mff==3?'background-color:#0773fc;color:white;':''" class="sxs">付费</span>
        </div>
        </div>
        <br>
        <div  class="hb" v-if="tagid||num!=0||img.length>50">
            <img @click="xq(x)" v-masonry-tile class="tu" v-for="x,i in img" :key="i" v-lazy="x.designTemplateThumbUrls[0]" alt="图片丢失">
        </div>
        <div  class="hb" v-else>
            <img  @click="xq(x)" class="tu" v-for="x,i in img" :key="i" v-lazy="x.designTemplateImageUrl" alt="图片丢失">
        </div>
        <infinite-loading direction="bottom" @infinite="infiniteHandler"></infinite-loading>
    </div>
  </div>
</template>

<script>
import Masonry from 'masonry-layout'
export default {
    data(){
        return{
            tag:[],
            tcl:'tt',
            xia:'xia',
            tyc:'txs',
            img:[],
            sx:'sxyc',
            ph:0,
            mff:0,
            time:'',
            tagid:'',
            num:0,
            page:1
        }
    },
    created(){
        this.fb()
        // var elem=document.querySelector('hb')
        // var msnry=new Masonry(elem,{
        //     itemSelector:'.tu'
        // })
    },
    methods:{
        infiniteHandler($state) {
            if(this.tagid){
                this.$http
                .get(
                `/ig/cache/wx_app_template_cache_v2/1_${this.page}_50_${this.$route.query.id}_0_0_${this.tagid}_${this.mff}_${this.ph}?v=${this.time}&client_type=40&_dataClientType=3`
                )
                .then((res) => {
                        this.page+=1
                        this.img=this.img.concat(res.data.body.templates)
                        console.log(this.img);
                        $state.loaded();
            });
            if(this.num!=0&&!this.tagid){
                this.$http
                .get(
                `/ig/cache/wx_app_template_cache_v2/0_${this.page}_50_0_${this.$route.query.id}_0_0_${this.mff}_${this.ph}?v=${this.time}&client_type=40&_dataClientType=3`
                )
                .then((res) => {
                        this.page+=1
                        this.img=this.img.concat(res.data.body.templates)
                        console.log(this.img);
                        $state.loaded();
                        // $state.complete();
                });
            }
            }else{
            this.$http
                .get(
                    // https://pub-cdn-oss.chuangkit.com/cache/today_recommend_template_v2/today_recommend_mobile_v2_447_50_2?v=1675737177000&client_type=40&_dataClientType=3
                    // http://localhost:8080/ig/cache/today_recommend_template_v2/today_recommend_mobile_v2_447_50_2?v=1675739115251&client_type=40&_dataClientType=3
                `/ig/cache/today_recommend_template_v2/today_recommend_mobile_v2_${this.$route.query.id}_50_${this.page}?v=${this.time}&client_type=40&_dataClientType=3`
                )
                .then((res) => {
                    this.page+=1
                        this.img=this.img.concat(res.data.body.templates)
                        console.log(this.img);
                        $state.loaded();
                        // $state.complete();
            });
            }
            
        },
        fb() {
            let time=new Date()
            this.time=time.getTime()-1800000
            if(this.$route.query.id==34||this.$route.query.id==4){
                this.$http
                .get(
                `/list/home/getDesignType.do?_dataType=json&client_type=40&second_kind_id=${this.$route.query.id}&_dataClientType=3`
                )
                .then((res) => {
                    this.tag=res.data.body.secondKindInfo.repoTag.style
                    console.log(this.tag);
                });
            }else{
                this.$http
                .get(
                `/list/home/getDesignType.do?_dataType=json&client_type=40&second_kind_id=${this.$route.query.id}&_dataClientType=3`
                )
                .then((res) => {
                    this.tag=res.data.body.secondKindInfo.repoTag.use
                    console.log(this.tag);
                });
            }
            // this.$http
            //     .get(
            //     `/ig/cache/today_recommend_template_v2/today_recommend_mobile_v2_${this.$route.query.id}_50_1?v=${time}&client_type=40&_dataClientType=3`
            //     )
            //     .then((res) => {
            //         this.img=res.data.body.templates
            //         console.log(this.img[0].designTemplateThumbUrls[0]);
            // });
        },
        fb2(){
            this.$http
                .get(
                `/ig/cache/wx_app_template_cache_v2/0_1_50_0_${this.$route.query.id}_0_0_${this.mff}_${this.ph}?v=${this.time}&client_type=40&_dataClientType=3`
                )
                .then((res) => {
                    this.img=res.data.body.templates
                    console.log(this.img);
            });
        },
        fb1(x){
            this.$http
                .get(
                `/ig/cache/wx_app_template_cache_v2/1_1_50_${this.$route.query.id}_0_0_${x}_${this.mff}_${this.ph}?v=${this.time}&client_type=40&_dataClientType=3`
                )
                .then((res) => {
                    this.img=res.data.body.templates
                    console.log(this.img);
            });
        },
        ft(){
            if(this.xia=='xia'){
                this.tyc='tyc'
                this.xia='shang'
            }else{
                this.tyc='txs'
                this.xia='xia'
            }
            
        },
        shai(){
            if(this.sx=='sx'){
                this.sx='sxyc'
            }else{
                this.sx='sx'
            }  
        },
        fl(x,i){
            this.tagid=x
            this.fb1(x)
            console.log(x,i);
            this.$refs.scroll.scrollLeft
            let lt=this.$refs.tt[i].offsetLeft-104
            this.$refs.scroll.scrollLeft=lt
        },
        zr(){
            this.ph=0
            let x=this.tagid
            if(this.tagid){
                this.num=1
                this.fb1(x)
            }else{
                this.num=0
                this.fb2()
            }
        },
        zx(){
            this.ph=1
            let x=this.tagid
            if(this.tagid){
                this.fb1(x)
            }else{
                this.num=1
                this.fb2()
            }
            
        },
        syzd(){
            this.ph=2
            let x=this.tagid
            if(this.tagid){
                this.fb1(x)
            }else{
                this.num=1
                this.fb2()
            }
        },
        zdsc(){
            this.ph=3
            let x=this.tagid
            if(this.tagid){
                this.fb1(x)
            }else{
                this.num=1
                this.fb2()
            }

        },
        qb1(){
            this.tagid=''
            this.fb()
        },
        qb(){
            this.mff=0
            let x=this.tagid
            if(this.tagid){
                this.fb1(x)
            }else{
                this.num=1
                this.fb2()
            }
        },
        mf(){
            this.mff=2
            let x=this.tagid
            if(this.tagid){
                this.fb1(x)
            }else{
                this.num=1
                this.fb2()
            }
        },
        ff(){
            this.mff=3
            let x=this.tagid
            if(this.tagid){
                this.fb1(x)
            }else{
                this.num=1
                this.fb2()
            }
        },
        xq(x){
            this.$router.push({
                path:'/xq',
                query:{
                    id:x.designTemplateId
                }
            })
        }

    }
    
}
</script>

<style scoped>
    .sousuo{
        width: 7.0235rem;
        height: .6802rem;
        margin: 0 .24rem;
        border-radius: .6802rem;
        border: none;
        background-color: #f8f8fb;
        text-align: center;
        font-size: 0.3rem;
    }
    .tags{
        width: 100vw;
        position: relative;
    }
    .tag{
        height: .82rem;
        box-sizing: border-box;
        font-size: .3rem;
        white-space: nowrap;
        padding:0 .8rem 0 .28rem;
        position: relative;
        overflow-x: scroll;
        overflow-y: hidden;
        border-bottom: 1px solid #f0f0f0;
    }
    .tag::-webkit-scrollbar {
        display: none;
    }
    body::-webkit-scrollbar {
        display: none;
    }
    .tts,.tt{
        line-height: .82rem;
        position: relative;
        height: .82rem;
        display: inline-block;
        margin-right: .4rem;
    }
    .tts{
        font-weight: bold;
    }
    .tts::before{
        content: '';
        background-color: #0773fc;;
        height: .07rem;
        width: .35rem;
        bottom: -.02rem;
        left: 50%;
        right: 50%;
        transform:translate(-50%,-50%);
        position: absolute;
        border-radius: .2rem;
    }
    .tyc{
        width: 100vw;
        height: 4.68rem;
        background-color: white;
        box-sizing: border-box;
        padding-left: .31rem;
        padding-top: .32rem;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .txs{
        display: none;
    }
    .tycs{
        display: inline-block;
        background-color:#f3f4f9;
        border-radius: .6rem;
        font-size: .25rem;
        width: 1.48rem;
        height: .6rem;
        margin-right: .3rem;
        margin-bottom: 0.24rem;
        line-height: .6rem;
        text-align: center;
    }
    .xia{
        width: .46rem;
        position: absolute;
        right: .2rem;
        background-color: white;
        top: calc(.82rem / 2 - .46rem / 2);
        box-shadow: .2rem 0 0 0 white;
    }
    .shang{
        width: .46rem;
        position: absolute;
        right: .2rem;
        background-color: white;
        top: calc(.82rem / 2 - .46rem / 2);
        transform: rotate(180deg);
        box-shadow: -.2rem 0 0 0 white;
    }
    .fl{
        height: 1.16rem;
        padding: .28rem .24rem;
        box-sizing: border-box;
    }
    .sx{
        height: .76rem;
        padding-left:  .24rem;
        margin-bottom: .2rem;
    }
    .sxyc{
        display: none;
    }
    .fls,.sxs{
        padding: 0 .3rem;
        background-color: #f3f4f9;
        display: inline-block;
        height: .6rem;
        border-radius: .6rem;
        font-size:.24rem;
        line-height: .6rem;
        vertical-align: top;
        margin-right: .13rem;
    }
    .hb{
        margin-top: 1.66rem;
        box-sizing: border-box;
        padding:  .24rem 0 0 .24rem;
    }
    .hb img{
        width:3.36rem;
        margin-right: .26rem;
        margin-bottom: .26rem;
    }
</style>